import React, { Component } from "react";

import u19 from "./u19.png";
import ewm from "../../assets/image/ewm.png";
import { Input, Space, Checkbox, Button, message } from "antd";
import "./loginbox.scss";
import "../../assets/style/iconfont.css";
import { Login, getAccount } from "../../serve";
class Icon extends Component {
  render() {
    return <i className="iconfont">{this.props.icon}</i>;
  }
}

class LoginBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
      passWord: "",
      checked: true,
      loadings: [],
    };
  }
  componentDidMount() {
    this.setState({
      userName: localStorage.getItem("username"),
      passWord: localStorage.getItem("password"),
    });
  }

  render() {
    // const { loadings } = this.state;
    return (
      <div className="login-box">
        <div className="title">
          <h1>ULINK 订单管理系统</h1>
          <p>Ulink order management system</p>
        </div>
        <div className="box">
          <div className="box-l left">
            <img src={u19} />
          </div>
          <div className="box-l right">
            <h2>用户登录</h2>
            <Space direction="vertical">
              <Input
                size="large"
                placeholder="账号"
                value={this.state.userName}
                prefix={<Icon icon="&#xe668;" />}
                onInput={(e) => {
                  this.setState({
                    userName: e.target.value,
                  });
                }}
              />
            </Space>
            <br />
            <Space direction="vertical">
              <Input.Password
                size="large"
                placeholder="密码"
                value={this.state.passWord}
                onInput={(e) => {
                  this.setState({
                    passWord: e.target.value,
                  });
                }}
                onKeyDown={(e) => {
                  if (e.key == "Enter") {
                    this.EnterLoading();
                  }
                }}
                prefix={<Icon icon="&#xe626;" />}
              />
            </Space>
            <br />
            <Checkbox
              defaultChecked={true}
              onChange={(e) => {
                this.setState({
                  checked: e.target.checked,
                });
              }}
            >
              记住密码
            </Checkbox>
            <br />
            <Button type="primary" onClick={this.EnterLoading.bind(this)}>
              登录
            </Button>
          </div>
        </div>
        <div className="bottom">
          联系电话：0371-56557107 &nbsp;&nbsp; 技术咨询：13633818817
          &nbsp;&nbsp; QQ：1330668660 &nbsp;&nbsp; 邮箱：sanheshixun@163.com
          &nbsp;&nbsp;&nbsp;
          <img src={ewm} />
        </div>
      </div>
    );
  }

  EnterLoading = () => {
    if (this.state.checked) {
      localStorage.setItem("username", this.state.userName);
      localStorage.setItem("password", this.state.passWord);
    } else {
      localStorage.setItem("username", "");
      localStorage.setItem("password", "");
    }
    Login({
      username: this.state.userName,
      password: this.state.passWord,
    }).then((res) => {
      if (res.data) {
        localStorage.setItem("Authorization", res.data.token);
        getAccount({ username: this.state.userName }).then((res) => {
          localStorage.setItem("userId", res.data.user_id);
          res.data.u_name
            ? localStorage.setItem("uName", res.data.u_name)
            : localStorage.setItem("uName", "");
          res.data.role_code == "ROLE_admins"
            ? localStorage.setItem("role", 0)
            : res.data.role_code == "ROLE_admin"
            ? localStorage.setItem("role", 1)
            : localStorage.setItem("role", 2);
          window.location.href = "/equipent";
        });
      } else {
        message.warning("账号或密码错误!");
      }
    });
  };
}

export default LoginBox;
